<template>
    <div class="decoration-pages min-w-[1100px]">
        <el-card shadow="never" class="!border-none flex-1 flex" :body-style="{ flex: 1 }">
            <div class="flex items-start h-full">
                <Menu v-model="activeMenu" :menus="menus" />
                <preview v-model="selectWidgetIndex" :pageData="getPageData" />
                <attr-setting class="flex-1" :widget="getSelectWidget" />
            </div>
        </el-card>
        <footer-btns class="mt-4" :fixed="false" v-perms="['decorate:pages:save']">
            <el-button type="primary" @click="setData">保存</el-button>
        </footer-btns>
    </div>
</template>
<script lang="ts" setup name="decorationPages">
import Menu from '../component/pages/menu.vue'
import Preview from '../component/pages/preview.vue'
import AttrSetting from '../component/pages/attr-setting.vue'
import widgets from '../component/widgets'
import { getDecoratePages, setDecoratePages } from '@/api/decoration'
import { getNonDuplicateID } from '@/utils/util'
enum pagesTypeEnum {
    HOME = '1',
    FLASH_SALE = '2',
    GOODS = '3',
    HOTGOODS = '4',
    USER = '5',
    COUPON_CENTER = '6',
    SERVICE = '7'
}

const generatePageData = (widgetNames: string[]) => {
    return widgetNames.map((widgetName) => {
        const options = {
            id: getNonDuplicateID(),
            ...(widgets[widgetName]?.options() || {})
        }
        return options
    })
}

const menus: Record<
    string,
    {
        id: number
        name: string
        pageData: any[]
    }
> = reactive({
    [pagesTypeEnum.HOME]: {
        id: 1,
        type: 1,
        name: '商城首页',
        pageData: generatePageData(['search', 'banner', 'img-set', 'nav', 'home-text', 'hot-goods'])
    },
    [pagesTypeEnum.FLASH_SALE]: {
        id: 2,
        type: 2,
        name: '限时抢购',
        pageData: generatePageData(['flash-sale'])
    },
    [pagesTypeEnum.GOODS]: {
        id: 3,
        type: 3,
        name: '商品详情',
        pageData: generatePageData([
            'goods-details',
            'goods-details-set',
            'similar-goods',
            'user-uLike-text',
            'user-uLike'
        ])
    },
    [pagesTypeEnum.HOTGOODS]: {
        id: 4,
        type: 4,
        name: '热门商品',
        pageData: generatePageData(['hot-goods-banner', 'user-uLike'])
    },
    [pagesTypeEnum.USER]: {
        id: 5,
        type: 5,
        name: '个人中心',
        pageData: generatePageData([
            'user-info',
            'my-subscribe',
            'my-service',
            'user-banner',
            'user-uLike-text',
            'user-uLike'
        ])
    },
    [pagesTypeEnum.COUPON_CENTER]: {
        id: 6,
        type: 6,
        name: '领券中心',
        pageData: generatePageData(['coupon-center'])
    },
    [pagesTypeEnum.SERVICE]: {
        id: 7,
        type: 7,
        name: '客服设置',
        pageData: generatePageData(['customer-service'])
    }
})

const activeMenu = ref('1')
const selectWidgetIndex = ref(-1)
const getPageData = computed(() => {
    return menus[activeMenu.value]?.pageData ?? []
})
const getSelectWidget = computed(() => {
    return menus[activeMenu.value]?.pageData[selectWidgetIndex.value] ?? ''
})

const getData = async () => {
    const data = await getDecoratePages({ id: activeMenu.value })
    menus[String(data.id)].pageData = JSON.parse(data.data)
}

const setData = async () => {
    await setDecoratePages({
        ...menus[activeMenu.value],
        data: JSON.stringify(menus[activeMenu.value].pageData)
    })
    getData()
}
watch(
    activeMenu,
    () => {
        selectWidgetIndex.value = getPageData.value.findIndex((item) => !item.disabled)
        getData()
    },
    {
        immediate: true
    }
)
</script>
<style lang="scss" scoped>
.decoration-pages {
    min-height: calc(100vh - var(--navbar-height) - 80px);
    @apply flex flex-col;
}
</style>
